<template>
  <div class="L">
    <div class="List">
      <van-nav-bar title="行李箱预约" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
    </div>
    <div class="content1">
      <div class="shou">
        <div></div>
        <van-cell class="top">
          <template>
            <van-field v-model="orderName" label="订单名称" placeholder="订单名称"/>
            <span class="xx">行李柜信息</span>
            <br/>
            <span class="custom-title">{{this.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.tel}}</span>
            <van-tag type="danger">默认</van-tag>
            <van-cell
              class="dz"
              :title="this.address"
              icon="location-o"
              @click="sure"
              is-link
              to="/address"
            />
          </template>
        </van-cell>
        <div class="seller">
<!--          <van-cell title="下单时间"/>-->
          <span class="van-cell">下单时间:{{this.emptyBoxCallTime}}</span>
        </div>
      </div>
      <div class="box">
        <van-cell class="top">
          <template>
            <span class="boxxx">箱子信息</span>
            <br/>
            <van-radio-group v-model="radio">
              <van-cell v-for="item in boxlist" :key="item.id" is-link to>
                <van-radio
                  :value="item"
                  @click="chuan(item)"
                  :name="item.id"
                >箱子规格：{{item.boxStandard}}
                </van-radio>
              </van-cell>
            </van-radio-group>
          </template>
          <van-cell @click="two">
            <span>预约周期</span>
            <van-stepper v-model="value" input-width="30px" button-size="25px"/>
            <span class="yue">小时</span>
          </van-cell>
        </van-cell>
      </div>
      <van-button class="submit" type="primary" size="large" @click="tijiao">提交</van-button>
    </div>
  </div>
</template>
<script>
  export default {
    mounted: function () {
      this.getData();
      this.getBoxData();
    },
    data() {
      return {
        radio: [],
        value: 1,
        m: 0,
        name: "",
        tel: "",
        address: "",
        totalPrice: "",
        boxStandard: "",
        boxUnitPrice: "",
        list: [],
        boxlist: [],
        orderName: "",
        //totalPrice: this.value * this.radio.boxUnitPrice
        emptyBoxCallTime: this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      };
    },
    methods: {
      onClickLeft() {
        this.$router.push("/home");
      },
      sure() {
      },
      chuan(value) {
        this.boxStandard = value.boxStandard;
        this.boxUnitPrice = value.boxUnitPrice;
        this.totalPrice = value.boxUnitPrice * this.value;
        console.log(this.boxStandard);
        console.log(this.totalPrice);
      },
      two() {
        this.totalPrice = this.boxUnitPrice * this.value;
      },
      tijiao() {
        if ("" == this.orderName) {
          this.$toast.fail("请填写订单名称");
        } else {
          this.$router.push({
            name: "sure",
            params: {
              name: this.name,
              tel: this.tel,
              address: this.address,
              time: this.emptyBoxCallTime,
              boxStandard: this.boxStandard,
              value: this.value,
              totalPrice: this.totalPrice,
              boxUnitPrice: this.boxUnitPrice,
              orderName: this.orderName,
              emptyBoxOrderTime: this.list.createTime
            }
          });
        }
      },
      getData() {
        this.$axios.get("prod-api/app/box/defaultAddress").then(res => {
          if (200 == res.data.code) {
            if (res.data.data == null) {
            } else {
              this.list = res.data.data;
              this.name = res.data.data.contacts;
              this.tel = res.data.data.contactsPhone;
              this.address = res.data.data.address;
              console.log(this.list);
            }
          }
        });
      },
      getBoxData() {
        this.$axios.get("prod-api/app/box/standard/select").then(res => {
          if (200 == res.data.code) {
            this.boxlist = res.data.data;
            console.log(this.boxlist);
          }
        });
      },
      sure() {
      }
    }
  };
</script>
<style lang="scss" scoped>
  .seller .timeClass {
    color: #333;
  }

  .van-cell {
    font-size: 12px;
  }

  .top {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
  }

  .shou {
    width: 90%;
    position: relative;
    margin-top: 10px;
    margin-left: 20px;
  }

  .box {
    position: relative;
    width: 90%;
    position: relative;
    margin-top: 30px;
    margin-left: 20px;

    .van-stepper {
      position: absolute;
      bottom: 10%;
      right: 20%;
    }

    .yue {
      font-size: 14px;
      bottom: 10%;
      position: absolute;
      right: 0;
    }
  }

  .van-tag {
    background-color: #227ccd;
    margin-left: 160px;
    margin-top: 19px;
  }

  .sm {
    padding-left: 23px;
  }

  .sd {
    padding-left: 23px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .xx {
    font-size: 14px;
    font-weight: bolder;
    padding-left: 15px;
    position: absolute;
    margin-top: 5px;
  }

  .boxxx {
    font-size: 14px;
    font-weight: bolder;
    padding-left: 15px;
    position: absolute;
    margin-top: 5px;
  }

  .custom-title {
    padding-left: 15px;
    padding-top: 15px;
    position: absolute;
    font-size: 13px;
  }

  .dz {
    color: gray;

    padding-left: 14px;
    font-size: 13px;
  }

  .listdown {
    margin-left: 80px;
    width: 200px;
  }

  .submit {
    border-radius: 20px;
    margin-top: 20px;
    background-color: #127bda;
  }

  .van-nav-bar {
    background-image: url("../assets/bg2.png");
  }

  .content1 {
    height: 100%;
    top: 10px;
    margin-top: 47px;
    position: relative;
  }

  .content {
    padding: 16px 16px 160px;
  }

  .L {
    background-color: #f4f5f7;
    height: 800px;
  }
</style>
